<template>
  <div class="works">
    <div class="back">
      <i class="iconfont icon-fanhui" @click="$router.back()"></i>
      <h5>{{ $route.query.child.category_name }}</h5>
    </div>
    <div class="title-nav" v-if="categorieslist.length !== 0">
      <ul>
       
        <li v-for="(item,index) in header" :key="item.value" :class="{active:isActive === index}" @click="getFilter(item,index)" >
         {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="main">
      <ul>
        <li v-for="products in headList" :key="products.id">
          <div class="cover">
            <img
              :src="
                products.cover +
                '?x-oss-process=image/resize,m_mfit,h_405,w_720'
              "
              alt=""
            />
            <span>
              {{getPlayTime(products.duration)}}'
                {{getPlaySecond(products.duration)}}"
            </span>
          </div>
          <div class="content">
            <div class="content-title">
              <h5>{{products.title}}</h5>
              <p>
                <span>播放量{{getPlayLook(products.count.count_view)}}</span>
                <span>喜欢{{getPlayLook(products.count.count_like)}}</span>
              </p>
            </div>
            <div class="creator">
              <img :src="products.author.userinfo.avatar" alt="" />
              <p>{{products.author.userinfo.username}}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
import { Toast } from "vant";
Vue.use(Tab);
Vue.use(Tabs);
export default {
  data() {
    return {
      title: [],
      headList: null,
      header:null,
      isActive:0,
    };
  },
  created: function () {
      Toast({
      message: "请稍后",
      icon: "https://img01.yzcdn.cn/vant/logo.png",
      duration: 0,
    });
  this.axios
      .get(
        "https://apis.netstart.cn/xpc/search/config"
      ).then((res)=>{
        console.log(res.data.data.category);
        this.header=res.data.data.category
      })
    this.axios
      .get(
        "https://apis.netstart.cn/xpc/articles?category_id=" +
          this.$route.query.child.id
      )
      .then((res) => {
      
        this.title = res.data.data.header.categories;
        console.log(this.title);
        this.headList = res.data.data.list;
       
        Toast.clear();
      });
  },
  computed: {
    categorieslist() {
      return this.title.filter(
        (ele) => ele.value == this.$route.query.child.id
      );
    },
  },
  methods: {
        getPlayLook: function (value) {
        if (value > 10000) {
        return (value / 10000).toFixed(1) +"w";
      }else if(value>1000){
        return (value / 1000).toFixed(1) +"k";
      } else {
        return value;
      }
    },
    getPlayTime: function (times) {
       if(times / 60<10){
            return "0"+ parseInt(times / 60)
        }else{
            return parseInt(times/60)
        }
    },
    getPlaySecond: function (times) {
       if(times % 60<10){
            return "0"+ parseInt(times % 60);
        }else{
            return  parseInt(times % 60);
        }
    },
    getFilter:function (item,index){
      this.isActive=index
       this.axios
      .get(
        "https://apis.netstart.cn/xpc/articles?category_id=" +item.id
         
      )
      .then((res) => {
        console.log(res.data.data.list);
       this.headList=res.data.data.list
       
       
      });
    }
  }
};
</script>

<style lang="less" scoped>
.works {
 
  .back {
    display: flex;
    align-items: center;
    box-shadow: 0 -1px 3px #999;
    i {
      font-size: 24px;
      font-weight: 600;
    }
    h5 {
      flex: 1;
      text-align: center;
      margin: 10px 0;
      font-size: 16px;
    }
  }
  .title-nav {
    overflow-x: scroll;
    width: 100%;
    box-shadow: 0 -1px 0 inset rgba(224, 224, 224, 0.507);
    ul {
      width: 100%;
      display: flex;
      
      li {
        color: #999;
        flex-shrink: 0;
        background: whitesmoke;
        margin: 10px;
        padding: 6px 10px;
        border-radius: 8px;
      
      }
         .active{
        color: red;
      }
     
    }
  }
  .main {
    ul {
        padding: 0;
      li {
        display: flex;
        margin: 8px;
        padding-bottom: 8px;
        box-shadow: 0px -1px 0px inset rgba(221, 218, 218, 0.534);
        .cover{
            width: 50%;
            position: relative;
            img{
                width: 100%;
                height: 100%;
            }
            span{
                position: absolute;
                bottom: 4px;
                right: 4px;
                color: white;
                font-size: 12px;
            }
        }
        .content{
            width: 45%;
            margin-left: 10px;
            .content-title{
              
                h5{
                    margin: 8px 0;
                    word-break: break-all;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                p{
                    margin: 10px 0;
                    span{
                       margin-right: 4px;
                       font-size: 12px;
                       color: #aaa;
                    }
                }
            }
            .creator{
                display: flex;
                align-items: center;
                img{
                    width: 26px;
                    height: 26px;
                    border-radius: 50%;
                }
                p{
                    margin: 0 0 0 4px;
                    font-size: 12px;
                }
            }
        }
      }
    }
  }
}
</style>